<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>绑定银行卡</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.min.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.picker.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.poppicker.css?rev=@@hash" rel="stylesheet" />
    <style>
        body{
            position: relative;
            background: #fff;
        }
       * {
            -webkit-box-sizing: content-box; 
            box-sizing: content-box;
        }
        .cells {
            /*margin-top: .2rem;*/
        }
        .cells_title {
            margin: 0;
            padding: .12rem .16rem;
            font-size: .16rem;
            height: .22rem;
        }
        .cell {
            padding: .11rem .16rem;
        }
        .cells_title a {
            display: block;
            float: left;
            height: .22rem;
            color: #c1c1c1;
            font-size: .17rem;
        }
        .cells_title span {
            display: block;
            float: left;
            font-size: .13rem;
            height: .22rem;
            line-height: .22rem;
            margin-left: .2rem;
            color: rgb(136,136,136)
        }
        .cell_hd{
            min-width: 0;
        }
        .cell_hd img{
            width: .24rem;
            height: .24rem;
        }
        .operatorContent {
            width: 100%;
            background: #f9f9f9;
            overflow: hidden;
            position: absolute;
            bottom: 0.2rem;
        }
        .txt {
            text-align: left;
            padding: 0!important;
            padding-left: .08rem!important;
            border: none!important;
            height: auto!important;
            margin: 0!important;
            color: #4AABA3!important;
        }
        .txt::placeholder{
            color: #4AABA3;
            font-size: .12rem;
        }
        span.cell_cn{
            color: #4AABA3;
            font-size: .12rem;
            padding-left: .08rem;
        }
        .getCode {
            color: red;
            font-size: .12rem;
        }
        .cell_ft img {
            display: block;;
            width: .2rem;
            height: .1rem;
        }
        .tip {
            line-height: .2rem;
            height: .2rem;
            overflow: hidden;
            margin: .2rem .4rem;
        }
        .tip span{
            display: block;
            float: left;
            font-size: .12rem;
            line-height: .2rem;
            height: .2rem;
        }
        .tip i {
            display: block;
            width: .12rem;
            height: .12rem;
            margin: 0.02rem .04rem;
            float: left;
        }
        .tip i img {
            width: 100%;
        }
        .cells_tips {
            margin: 0.05rem .4rem;
            font-size: .12rem;
        }
        .cells_tips a {
            color: red;
        }
        select {
            border: 0;
            float: right;
            width: 1.2rem;
            height: .2rem; 
            appearance:none;  
            -moz-appearance:none;  
            -webkit-appearance:none;  
            background: url("../images/gogogo.png") ;
            background-repeat: no-repeat;
            background-size: 20% 100%;
            background-position: 100% 0%;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/ 
            
            padding: 0 .14rem;
            font-size: .14rem;
        }
        select::-ms-expand { display: none; }
        select option {
            width: 1.2rem;
            height: .2rem; 
            font-size: .14rem;
            background-color: white;
        }
        .cell_cn img {
            position: absolute;
            top: .12rem;
            right: .4rem;
            width: .2rem;
            height: .2rem;
        }
        .cell:before {
            width: 3.11rem;
        }

        .cells:after {
            content: " ";
            position: absolute;
            left: .4rem;
            bottom: 0px;
            width: 3.11rem;
            height: 1px;
            border-bottom: 1px solid #E4E4E4;
            color: #E4E4E4;
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
       .submitBtn {
            width: 3.43rem;
            background: #1EB97E;
            border-radius: .25rem;
            margin: 2.38rem auto 0;
            font-size: .15rem;
            position: static;
            box-shadow: 0 3px 6px #AEDEC6;
        }
        .mui-picker-inner {
            background: #fff;
            -webkit-mask-box-image: -webkit-linear-gradient(bottom, black, black 100%, #fff 100%, #fff 100%, black 100%, #000000)!important;
            -webkit-mask-box-image: linear-gradient(top, #000000, #000000 100%, #fff 100%, #fff 100%, #000000 100%, #000000);
        }
        .mui-poppicker-header{
            padding: 0;
        }
        .mui-poppicker{
            background-color: rgba(238, 238, 238, 0);
            border-top: solid 1px rgba(204, 204, 204, 0);
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
        }
        .mui-poppicker-btn-cancel{
            width: 1rem;
            height: .45rem;
            border-radius: .1rem .1rem 0 0;
            border: none;
            background: #c1c1c1;
        }
        .mui-poppicker-btn-ok{
            width: 1rem;
            height: .45rem;
            border-radius: .1rem .1rem 0 0;
            border: none;
            background:#1EB97E;
        }
        .mui-poppicker-body{
            border:none;
        }
        .mui-pciker-list li.highlight {
            color: #1eb97e;
        }
    </style>
</head>
<body>
    <!-- 蒙版 -->
    <div class="layer_load">
        <div class="layer_mask"></div>
        <div class="layer_load_icon icon-loading"></div>
    </div>
    <div class="cells_title">
        <a>个人信息</a>
    </div>
	<div class="cells">
        <div class="cell" id="bindBank">
            <label class="cell_hd"><img src="../img/bankName.png"></label>
            <span class="cell_cn selectTxt">选择开户行
                <!-- <select name="" class="selectChoose" id="">
                    <option value="0">请选择</option>
                </select> -->
            </span>
            <label class="cell_hd"><img src="../img/rightArrow.png"></label>
        </div>
        <div class="cell">
            <label class="cell_hd"><img src="../img/bankNo.png"></label>
            <div class="cell_cn">
                <input type="text" class="txt" placeholder="请输入银行卡号" id="bankCardNo" maxlength="19" />
            </div>
        </div>
	</div>

    <div class="cells_title">
        <a>银行预留手机号</a>
    </div>
    <div class="cells">
        <div class="cell">
            <label class="cell_hd"><img src="../img/phoneNo.png"></label>
            <div class="cell_cn">
                <input type="text" class="txt" placeholder="请输入手机号码" id="telNum" maxlength="11" />
            </div>
        </div>
<!--         <div class="cell">
            <label class="cell_hd">短信验证码：</label>
            <div class="cell_cn">
                <input type="text" class="txt" placeholder="请输入" id="telSns" maxlength="6" />
            </div>
            <div class="cell_ft">
                <a href="javascript:;" class="login_btn_code" id="btnCode">获取验证码</a>
            </div>

        </div> -->
    </div>

        <div class="submitBtn ">
            提交
        </div>

    <!-- 脚本 -->
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script src="../js/main.js?rev=@@hash"></script>
    <script src="../js/mui.min.js?rev=@@hash"></script>
    <script src="../js/mui.picker.min.js?rev=@@hash"></script>
    <script src="../js/mui.poppicker.js?rev=@@hash"></script>
    <script src="../js/city.data-3.js?rev=@@hash"></script>    
    <script>
        (function(global,userUtil,layer){       
        	var orderNo=localStorage.getItem("orderNo");
            var localH=localStorage.getItem("localH");
            var _datas;
            if(!localH){
                localH=localStorage.setItem("localH",document.documentElement.clientHeight)
            }
            $("body").height(document.documentElement.clientHeight);
            
            var sessionId=userUtil.sid(),userUuid=userUtil.userID(),bankId,bankCardName;
            var _data={
                "sessionId": sessionId
            };
            $(".tip i").click(function(){
                if($(".tip i img").attr('src')=="../images/bingo.png"){
                    $(".tip i img").attr('src',"../images/noBingo.png");
                    $(".confirmBtn img").attr('src',"../images/confirmBtn.png");
                    $(".confirmBtn").off("click");
                }else {
                    $(".tip i img").attr('src',"../images/bingo.png");
                    $(".confirmBtn img").attr('src',"../images/checkInfBtn.png");
                    $(".confirmBtn").click(function(){

                    })
                }
            })
            ///选择银行卡
            $("#bindBank").on("click", function () {
                var newPicker = new mui.PopPicker({
                    layer: 1
                });
                var newData = getPickData(_datas);
                newPicker.setData(newData);
                  
                setTimeout(function () {
                    newPicker.show(function (items) {
                        if ((items[0] || {}).text == undefined) {
                            (items[0] || {}).text = "";
                        }
                        $("#bindBank .selectTxt").attr('dataId', (items[0] || {}).value);
                        $("#bindBank .selectTxt").text((items[0] || {}).text).css('color','#1eb97e');
                    });
                }, 200);
            });   
            function getPickData(data) {
                var retData = new Array();
                var retDatas = new Array();
                for (var i = 0; i < data.length; i++) {
                    retData[i] = {
                        value: data[i].id,
                        text: data[i].bankName
                    }
                }
                return retData;
            }            
            // //判定绑卡
            //   var bankCardProgress=0;
            //   //获取认证进展状态
            //   function getProgress(){
            //       $.ajax({
            //           url: global.localUrl + "web/credit/getCompletion",
            //           type: "post",
            //           data: JSON.stringify({"sessionId": sessionId}),
            //           contentType: 'application/json;charset=utf-8',
            //           success: function (re) {
            //               if (1 == re.code) {
            //                 bankCardProgress=re.data.bankCardProgress;
            //               }else{
            //                 layer.tips(re.message);
            //               }
                          
            //               if(bankCardProgress>0){
            //                 layer.tips('已绑定银行卡，订单提交成功');
                            
            //                 setTimeout(function(){
            //                     window.location.href = global.localUrl+"index.html";  //跳转基本信息页面
            //                 },1000);
            //               }else{
            //                 layer.tips('请绑定银行卡');
            //                 setTimeout(function(){
            //                     window.location.href = global.localUrl+"trust/bindCard.html";  //跳转基本信息页面
            //                 },1000);
            //               }

            //           },
            //           error: function () {
            //               layer.tips(global.netError);
            //           }
            //       });
            //   }
            //   getProgress();


            //  验证码
            $("#btnCode").on("click", function () {
                var $this = $(this);
                function isPoneAvailable(str) {  
                  var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
                  if (!myreg.test(str)) {  
                      return false;  
                  } else {  
                      return true;  
                  }  
                } 
                if(!isPoneAvailable($("#telNum").val())){
                    layer.tips("输入的手机号码不合法");
                    return;
                }
                var _data={
                    "sessionId": sessionId,
                     "mobileNumber": $("#telNum").val(),
                     "smsType":"BANKFIRST"
                }
                if (!$this.hasClass("dis")) {
                    $this.addClass("dis");
                    $.ajax({
                        url: global.localUrl + "wallet/bankCardSmsCode",
                        type: "post",
                        data: JSON.stringify(_data),
                        contentType: 'application/json;charset=utf-8',
                        success: function (re) {
                            if (1 == re.code) {
                                showWaitTips();
                            }
                            else{
                                $this.removeClass("dis");
                                layer.tips(re.message);
                            }
                        },
                        error: function () {
                            $this.removeClass("dis");
                            layer.tips(global.netError);
                        }
                    });
                }
            });
            
            // 验证码倒计时
            function showWaitTips() {
                var $btnCode = $("#btnCode");
                var s = 60;
                $btnCode.text("已发送(" + s + ")").addClass("dis");
                var sv = setInterval(function () {
                    if (s > 1) {
                        s--;
                        $btnCode.text("已发送(" + s + ")");
                    } else {
                        $btnCode.text("重新获取").removeClass("dis");
                        clearInterval(sv);
                    }
                }, 1000);
            };

            //银行卡列表获取

            $.ajax({
                url: global.localUrl + "wallet/bankDefineList",
                type: "post",
                data: JSON.stringify(_data),
                contentType: 'application/json;charset=utf-8',
                success: function (re) {
                    if (1 == re.code) {
                        _datas=re.data;
                    }
                    else{
                        layer.tips(re.message);
                    }
                },
                error: function () {
                    layer.tips(global.netError);
                }
            });

            // 卡bin校验blur
            // $("#bankCardNo").blur(function(){
            //     console.log("失去焦点了")
            //     var _data={
            //         "sessionId": sessionId,
            //         "bankCardNo": $("#bankCardNo").val()
            //     }
            //     $.ajax({
            //         url: global.localUrl + "wallet/checkBankCardBin",
            //         type: "post",
            //         data: JSON.stringify(_data),
            //         contentType: 'application/json;charset=utf-8',
            //         success: function (re) {
            //             if (1 == re.code) {
            //                 layer.tips("银行卡号可用");
            //                 bankId=re.data.bankId;
                            
            //             }
            //             else{
            //                 setTimeout(function(){
            //                     window.location.reload();
            //                 },2000);
            //                 layer.tips(re.message);
            //             }
            //         },
            //         error: function () {
            //             layer.tips(global.netError);
            //         }
            //     });
            // })
            // 提交/
            $(".submitBtn").click(function(){
                var _data={
                    "sessionId": sessionId,
                    "userUuid": userUuid,
                     "bankId": $("#bindBank .selectTxt").attr("dataId"),
                     "bankNumberNo": $("#bankCardNo").val(),
                     "bankNumberMobile": $("#telNum").val(),
                     // "smsCode": $("#telSns").val()
                }
                for(var e in _data){
                    if(!_data[e]){
                        layer.tips("请输入完整信息");
                        return;
                    }
                }
                $.ajax({
                    url: global.localUrl + "wallet/saveUserBank",
                    type: "post",
                    data: JSON.stringify(_data),
                    contentType: 'application/json;charset=utf-8',
                    success: function (re) {
                        if (1 == re.code) {
                            layer.tips("绑卡成功，请设置交易密码");
                            setTimeout(function(){
                                //window.location.href=global.localUrl +"trust/setPassword.html";
                                window.location.href="setPassword.html";
                            },2000);

                        }
                        else{

                            layer.tips(re.message);
                        }
                    },
                    error: function () {
                        layer.tips(global.netError);
                    }
                });
            })


        })(global,userUtil,layer)
    </script>
</body>
</html>